import BpmnModeler from "bpmn-js/lib/Modeler";
import React, {useEffect,useRef} from 'react';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
import './panel.css';
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'



let bpmnModeler = null;
const xmlstr = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_16gx7pd" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.30.0" modeler:executionPlatform="Camunda Platform" modeler:executionPlatformVersion="7.22.0">
  <bpmn:process id="Process_09uj5l4" isExecutable="true">
    <bpmn:startEvent id="StartEvent_1">
      <bpmn:outgoing>Flow_1k8nstp</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:task id="Activity_00q1yqc">
      <bpmn:incoming>Flow_1k8nstp</bpmn:incoming>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_1k8nstp" sourceRef="StartEvent_1" targetRef="Activity_00q1yqc" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_09uj5l4">
      <bpmndi:BPMNShape id="Activity_00q1yqc_di" bpmnElement="Activity_00q1yqc">
        <dc:Bounds x="300" y="80" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <dc:Bounds x="182" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_1k8nstp_di" bpmnElement="Flow_1k8nstp">
        <di:waypoint x="218" y="120" />
        <di:waypoint x="300" y="120" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>
`;

function MainPanel(){
   
    let bpmnModeler = null;

    useEffect(() => {  
      initBpmn();
    }, [])
  
    const initBpmn = () => {
  
      bpmnModeler = new BpmnModeler({
        container: '#canvas', // 这里为数组的第一个元素
        height: '100vh',
        propertiesPanel: {
            parent: '.properties-panel'
          },
          
      });
  
      createBpmnDiagram();
    }
  
    const createBpmnDiagram = async () => {
      // 开始绘制出事bpmn的图
      try {
        const result = await bpmnModeler.importXML(xmlstr);
        console.log(result);
      } catch(error) {
        console.error(error)
      }
    }
  
    return (
      <div >
        {/* bpmn容器 */}
        <div id="canvas" className="container"></div>
        <div  className="properties-panel"></div>
      </div>
    );
  


}

export default MainPanel;